<!--
 * @Author: Administrator 843338961@qq.com
 * @Date: 2022-07-02 14:29:49
 * @LastEditors: Administrator 843338961@qq.com
 * @LastEditTime: 2022-07-02 17:50:38
 * @FilePath: \mall\src\views\detail\childComps\DetailBottomBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="bottomBar">
    <div class="barItem barLeft">
        <div>
            <i class="icon service"></i>
            <div>客服</div>
        </div>
        <div>
            <i class="icon shop"></i>
            <div>店铺</div>
        </div>
        <div @click="goCart()">
            <i class="icon cart"></i>
            <div>购物车<template v-if="cartItemLength>0">({{cartItemLength}})</template></div>
        </div>
    </div>
    <div class="barItem barRight">
        <div class="addCart" @click="addCart()">加入购物车</div>
        <div class="buy">立即购买</div>
    </div>
</div>
</template>

<script>

import {mapGetters} from 'vuex';
export default {
    name:'DetailBottomBar',
    computed:{
      //mapGetters将vuex里的getters转化为computed
      //1
      ...mapGetters(['cartItemLength'])
      //2
      // ...mapGetters({
      //   length:'cartItemLength'
      // })
    },
    methods:{
        addCart(){
            this.$emit('addCart')
        },
        goCart(){
            this.$router.push('/cart');
        }
    }
}
</script>

<style>
.bottomBar{
    width: 100%;
    height: 49px;
    background-color: #fff;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    text-align: center;
}
.barItem{
    flex: 1;
    display: flex;
}
.barLeft{
    display: flex;
    /* background-color: darkkhaki; */
    font-size: 13px;
}
.barItem>div{
    flex: 1;    
}
.barLeft .icon{
    display: block;
    width: 22px;
    height: 22px;
    margin: 5px auto 3px;
    background: url(~assets/img/detail/detail_bottom.png) 0 0/100%;  
}
.barLeft .service{
    background-position: 0px -54px;
}
.barLeft .shop{
    background-position: 0px -98px;
}
.barRight{
    /* background-color: chocolate; */
    line-height: 49px;
    font-size: 14px;
    color: black;
}
.barRight .addCart{
    background-color: #dd5621;
}
.barRight .buy{
    background-color: #ffc400;
}
</style>